
<template>
  <div>
    <Form  style="margin-left: 40px;" :model="form" :label-width="100">
      <FormItem  label="用户头像">
        <div class="demo-upload-list" v-show="showUpload">
          <template >
            <img :src="form.src">
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click.native="handleView()"></Icon>
              <Icon type="ios-trash-outline" @click.native="handleRemove()"></Icon>
            </div>
          </template>
        </div>
        <div class="demo-upload-list" v-show="!showUpload">
          <Upload
            ref="upload"
            :headers= header
            :show-upload-list="false"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="2048"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload"
            type="drag"
            :action="uploadPictureUrl"
            style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
      </div>
      </FormItem >

      <FormItem label="用户名">
        <Input v-model="form.userName" style="width: 400px"></Input>
      </FormItem>

      <FormItem label="昵称">
        <Input v-model="form.nickName" style="width: 400px"></Input>
      </FormItem>

      <FormItem label="性别">
        <RadioGroup :model="form.gender">
          <Radio label="1">男</Radio>
          <Radio label="2">女</Radio>
        </RadioGroup>
      </FormItem>

      <FormItem label="生日">
        <DatePicker :value="form.birthday" type="date" placeholder="Select date" style="width: 400px" @on-change="changBirthday"></DatePicker>
      </FormItem>

      <FormItem label="邮箱">
        <Input v-model="form.email" style="width: 400px"></Input>
      </FormItem>

      <FormItem label="手机">
        <Input v-model="form.mobile" style="width: 400px"></Input>
      </FormItem>

      <FormItem label="QQ号">
        <Input v-model="form.qqNumber" style="width: 400px"></Input>
      </FormItem>

      <FormItem label="微信">
        <Input v-model="form.weChat" style="width: 400px"></Input>
      </FormItem>

      <FormItem label="Github">
        <Input v-model="form.github" style="width: 400px"></Input>
      </FormItem>

      <FormItem label="Gitee">
        <Input v-model="form.gitee" style="width: 400px"></Input>
      </FormItem>

      <FormItem label="职业">
        <Input v-model="form.occupation" style="width: 400px"></Input>
      </FormItem>

      <FormItem label="简介">
        <Input
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 10}"
          placeholder="请输入内容"
          style="width: 400px"
          v-model="form.summary">
        </Input>
      </FormItem>

      <FormItem>
        <i-button type="primary" @click="submitForm('changeAdminForm')" v-permission="'/system/editMe'">保 存</i-button>
      </FormItem>

    </Form >

    <Modal title="View Image" v-model="visible">
      <img :src="form.src" v-if="visible" style="width: 50%">
    </Modal>


  </div>
</template>
<script>

import {uploadUrl} from '@/api/uploadFile'
import {getCurrent,editAdmin} from '@/api/adminApi'
import {header} from '@/api/uploadFile';

  export default {
    name: 'adminInfo',
  /*  props: {
      userId: Number,
      modal: Boolean
    },*/
    data() {
      return {
        header:header,
        showUpload:true,
        uploadPictureUrl:uploadUrl,
        form:{
          gender: "1",
          icon: false, //控制删除图标的显示,
          src:'',
          id:0,
          mobile:''
        },
        imgName: '',
        visible: false,
        uploadList: []
      };
    },
    computed: {
      show() {
        //return this.modal
      },
    },
    created(){
      //填充当前用户信息
      this.showUserInfo();
    },
    methods: {
      cancel() {
        //this.$emit('close');
      },
      showUserInfo(){
        getCurrent().then(res => {
          if(res.data.code == 200){
            let src = res.data.data.avatar;
            this.form.src = src;
            this.form.id = res.data.data.id;
            if(src){
              this.showUpload = true;
            }
            //填充其他信息
            /* const value = res.data.data.gender;
              if(value){
                this.form.gender = value ;
              }*/
            this.form.id = res.data.data.id;
            this.form.nickName = res.data.data.nickName;
            this.form.email = res.data.data.email;
            this.form.birthday = res.data.data.birthday;
            this.form.userName = res.data.data.userName;
            this.form.summary = res.data.data.summary;
            this.form.qqNumber = res.data.data.qqNumber;
            this.form.mobile = res.data.data.mobile;
            this.form.weChat = res.data.data.weChat;
            this.form.occupation = res.data.data.occupation;
            this.form.github = res.data.data.github;
            this.form.gitee = res.data.data.gitee;
          }

        })
      },
      checkPhoto(){},
      deletePhoto(){},
      submitForm(){
        editAdmin(this.form).then(res => {
          if(res.data.code == 200){
             this.$Message.info("修改用户信息成功");
             //跳转到首页
            this.$router.push({name:'home'})
          }
        });
      },
      handleView () {
        this.visible = true;
      },
      handleRemove () {
       //删除src的属性
        this.showUpload = false;
      },
      handleSuccess (res, file) {
        if(res.code == 200){
          this.form.src = res.data;
          this.form.avatar = res.data;
          this.showUpload = true;
        }

      },
      handleFormatError (file) {
        this.$Notice.warning({
          title: 'The file format is incorrect',
          desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
        });
      },
      handleMaxSize (file) {
        this.$Notice.warning({
          title: 'Exceeding file size limit',
          desc: 'File  ' + file.name + ' is too large, no more than 2M.'
        });
      },
      handleBeforeUpload () {
        const check = this.uploadList.length < 5;
        if (!check) {
          this.$Notice.warning({
            title: 'Up to five pictures can be uploaded.'
          });
        }
        return check;
      },
      changBirthday(date1,date2){
        this.form.birthday = date1;
      },
    },

  }
</script>

<style scoped>
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    margin: 0, 0, 0, 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .imgBody {
    width: 100px;
    height: 100px;
    border: solid 2px #ffffff;
    float: left;
    position: relative;
  }
  .uploadImgBody {
    margin-left: 5px;
    width: 100px;
    height: 100px;
    border: dashed 1px #c0c0c0;
    float: left;
    position: relative;
  }
  .uploadImgBody :hover {
    border: dashed 1px #00ccff;
  }
  .inputClass {
    position: absolute;
  }
  .img {
    width: 100%;
    height: 100%;
  }
  img {
    width: 100px;
    height: 100px;
  }
  .editor-container{
    margin-bottom: 30px;
  }
  .demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
  }
  .demo-upload-list img{
    width: 100%;
    height: 100%;
  }
  .demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
  }
  .demo-upload-list:hover .demo-upload-list-cover{
    display: block;
  }
  .demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
</style>
